<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="hd">
        <router-view></router-view>
    </div>
    <script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">
            <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
        </li>
        <router-view></router-view>
    </div>
</script>
    <script type="text/x-template" id="content">
    <div>
        <h1>{{field.title}}</h1>
        <p>{{field.content}}</p>
        <router-link to="/">返回首页</router-link>
    </div>
</script>
    <script>
        var data=[
            {id:1,title:'HDCMS内容管理系统',content:'这是内容管理系统'},
            {id:2,title:'HDPHP后盾内容框架',content:'这是后盾框架'}
        ]
        const home={
            template:'#home',
            data(){
                return {
                    news:data
                }
            }
        }
        const content={
            template:'#content',
            data(){
                return {
                    field:{}
                }
            },
            watch:{
                '$route'(to,from){
                    this.load();
                }
            },
            mounted(){
                this.load();
            },
            methods:{
                load(){
                    this.id=this.$route.params.id;
                    for(let i=0;i<data.length;i++){
                        if(this.id==data[i].id){
                            this.field=data[i];
                        }
                    }
                }
            }
        }
        let route=new VueRouter({
            routes:[
                {path:'/',component:home,children:[
                        {path:'/content/:id',component:content,name:'content'}
                    ]},

            ]
        })
        var app=new Vue({
            el:'#hd',
            data:{},
            router:route
        })
    </script>
</body>
</html>